<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="assets/css/fontawesome.min.css">

<title>SAT>IP Log Page</title>

<script src="assets/js/menu.js"></script>
<script src="assets/js/loadxmldoc.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/cookies.js"></script>
<script>
	var stopScroll = false;
	var reverse;
	var checkbox;

	document.addEventListener("DOMContentLoaded", function(event){
		checkbox = document.getElementById("reverselog");
		var reverselogCookieValue = getCookie("reverselog");
		if (reverselogCookieValue == "" && reverselogCookieValue == null) {
			setCookie("reverselog", checkbox.checked, 365);
		} else {
			checkbox.checked = reverselogCookieValue == "true" ? true : false;
		}
		reverse = checkbox.checked;
	});

	function reverseLogHanlde() {
		setCookie("reverselog", checkbox.checked, 365);
		reverse = checkbox.checked;
	}

	function buildcontent(jsonString) {
		var json = JSON.parse(jsonString);
		var page = "";
		var textarea = document.getElementById("txt");

		if (stopScroll == false && reverse == true) {
			textarea.scrollTop = 0;
		} else if(stopScroll == false && reverse == false) {
			scrollToBottom();
		}

		for (i = 0; i < json.log.length; i++) {
			page += "&nbsp;&nbsp;";
			page +=  json.log[i].timestamp;
			page += "&nbsp;&nbsp;";
			page +=  json.log[i].prio;
			page += "&nbsp;&nbsp;";
			page +=  json.log[i].msg;
			page += "\n";
		}

		if(reverse == true){
			reversedLog = page.split("\n").reverse().join("\n");
			return reversedLog;
		} else {
			return page;
		}
	}
	function updatePage() {
		loadJSONDoc("log.json");
	}
	// function called when JSON is loaded
	function jsonloaded(jsonString) {
		document.getElementById("txt").innerHTML = buildcontent(jsonString);
	}
	function scrollToBottom() {
		$("#txt").scrollTop($("#txt")[0].scrollHeight);
	}
	$("#txt").change(function() {
		scrollToBottom();
	});
</script>

</head>
<body>
<div id="menu"></div>

<div class="p-1">
<div class="window-start container border rounded-bottom">
	<div class="window-name">
		<p>Main Log</p>
	</div>
		<div class="custom-control custom-switch">
			<input type="checkbox" class="custom-control-input" id="reverselog" onclick="reverseLogHanlde();">
			<label class="custom-control-label" id="reverseloglabel" for="reverselog">Reverse log</label>
		</div>
	<div class="p-1 container-log">
		<textarea id="txt" wrap="off" class="form-control logtext text-monospace" onmouseover="stopScroll = true" onmouseout="stopScroll = false" readOnly></textarea>
	</div>
	<script>
		// make menu
		document.getElementById("menu").innerHTML = buildmenu();
		setMenuItemActive("log");

		// Call the ajax refresh each refresh_time seconds
		var refresh_time = 2000;
		updatePage();
		setInterval("updatePage()", refresh_time);
	</script>
</div>
</div>
</body>
</html>
